<template>
	<cmDialog v-model="dialogState" modal-title="标准列表" model-width="1200px">
		<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="search()">
			<el-form-item label="关键词" prop="keyword">
				<el-input v-model="state.keyword" placeholder="请输入">
					<template #prepend>
						<el-select v-model="state.keyType" placeholder="请选择" style="width: 100px; min-width: 100px">
							<el-option label="标准编号" value="1" />
							<el-option label="标准名称" value="2" />
							<el-option label="项目负责人" value="3" />
							<el-option label="联系人" value="4" />
							<el-option label="提交人" value="5" />
						</el-select>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button icon="Search" type="primary" @click="search()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="reset()">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="state.dataListLoading" :data="dataList" stripe class="layout-table">
			<el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
			<el-table-column align="center" label="标准编号" prop="standardNumber" />
			<el-table-column align="center" label="标准名称" prop="standardProjectName" />
			<el-table-column align="center" label="联系人" prop="contactName" />
			<el-table-column align="center" label="联系电话" prop="contactTel" />
			<el-table-column align="center" label="项目负责人" prop="projectLeader" />
			<el-table-column align="center" label="主编单位" prop="editorUnitName" />
			<el-table-column align="center" label="实施日期" prop="implementationTime" />
			<el-table-column align="center" label="标准附件" prop="filesRecordList">
				<template #default="scope">
					<el-tag v-for="item in scope.row.filesRecordList" :key="item.id" type="success" style="margin-left: 5px">
						{{ item.fileRealName }}.{{ item.fileExtName }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="上次复审结论" width="100" prop="remark">
				<template #default="scope">
					<span v-if="scope.row.remark">{{ reviewResult.filter(item => item.code === scope.row.remark)[0].name }}</span>
					<!-- <span>{{ scope.row.remark }}</span> -->
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" width="100" fixed="right">
				<template #default="scope">
					<el-button size="small" type="primary" @click="handleClick(scope.row)">选择</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.pageNum"
			:page-size="state.pageSize"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
		<div class="dialog-foot">
			<el-button @click="dialogState = false">关闭</el-button>
		</div>
	</cmDialog>
</template>
<script lang="ts" setup>
import { getApplyList } from '@/api/fushen/declare'
import cmDialog from '@/components/cm-dialog/index.vue'
import { useDictionaryStore } from '@/store/modules/dictionary'
import { computed, reactive, ref, watch } from 'vue'
const dictionaryStore = useDictionaryStore()

const reviewResult = dictionaryStore.getDictionaryByCode('T016')

const props = defineProps({
	modelValue: Boolean
})

const emit = defineEmits(['update:modelValue', 'submit-success', 'close-dialog'])

const dialogState = computed({
	get: () => props.modelValue,
	set: val => emit('update:modelValue', val)
})

watch(
	() => props.modelValue,
	val => {
		if (val) {
			reset()
		}
	}
)

const state = reactive({
	queryForm: {
		standardNumber: '',
		standardProjectName: '',
		responsiblePerson: '',
		contactName: '',
		applyYear: '',
		reviewAddtype: '',
		reviewYear: '',
		userName: ''
	},
	pageNum: 1,
	pageSize: 10,
	total: 1,
	dataListLoading: false,
	keyType: '',
	keyword: null
})

const dataList = ref([])

const getDataList = () => {
	switch (state.keyType) {
		case '1':
			state.queryForm.standardNumber = state.keyword
			break
		case '2':
			state.queryForm.standardProjectName = state.keyword
			break
		case '3':
			state.queryForm.responsiblePerson = state.keyword
			break
		case '4':
			state.queryForm.contactName = state.keyword
			break
		case '5':
			state.queryForm.userName = state.keyword
			break
	}
	state.dataListLoading = true
	getApplyList({
		pageIndex: state.pageNum,
		pageSize: state.pageSize,
		...state.queryForm
	}).then(res => {
		state.dataListLoading = false
		dataList.value = res.data.list || []
		state.total = res.data.total || 0
	})
}

const sizeChangeHandle = (e: number) => {
	state.pageSize = e
	state.pageNum = 1
	getDataList()
}
const currentChangeHandle = (e: number) => {
	state.pageNum = e
	getDataList()
}

const search = () => {
	state.pageNum = 1
	getDataList()
}

const reset = () => {
	state.queryForm.standardNumber = ''
	state.queryForm.standardProjectName = ''
	state.queryForm.responsiblePerson = ''
	state.queryForm.contactName = ''
	state.queryForm.applyYear = ''
	state.queryForm.reviewAddtype = ''
	state.queryForm.reviewYear = ''
	state.queryForm.userName = ''
	state.keyword = null
	state.keyType = ''
	state.pageNum = 1
	getDataList()
}

const handleClick = data => {
	emit('submit-success', data)
	dialogState.value = false
}

// onMounted(() => {
// 	getDataList()
// })
</script>
<style lang="scss" scoped>
.dialog-foot {
	display: flex;
	justify-content: center;
	padding-top: 20px;
	margin-bottom: 10px;
}
</style>
